<template>
  <div>
    <div class="device-select">
      <h4 style="margin-left: 0px">站点选择</h4>
      <el-cascader
        placeholder="请选择站点"
        v-model="stationValue"
        :options="stationList"
        @change="handleChangeStation"
      ></el-cascader>
      <h4>设备选择</h4>
      <el-select v-model="deviceValue" placeholder="请选择设备">
        <el-option-group
          v-for="group in deviceList"
          :key="group.label"
          :label="group.label"
        >
          <el-option
            v-for="item in group.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-option-group>
      </el-select>
      <h4>图例尺寸</h4>
      <el-slider v-model="legendSize"></el-slider>

      <div style="width: 30%"></div>
      <el-button type="primary">清除当前设备</el-button>
      <el-button type="danger">清除全部图例</el-button>
      <el-button type="success">保存编辑</el-button>
    </div>
    <div class="legend">
      <h3>图例表示：</h3>
      <div v-for="(item, index) in legendList1" :key="index">
        <i
          :class="item.type"
          :style="{ fontSize: item.size + 'px', color: item.fill }"
        ></i>
        <h3>{{ item.description }}</h3>
      </div>
    </div>
    <div class="legend">
      <h3>颜色表示：</h3>
      <div v-for="(item, index) in legendList2" :key="index">
        <i
          :class="item.type"
          :style="{ fontSize: item.size + 'px', color: item.fill }"
        ></i>
        <h3>{{ item.description }}</h3>
      </div>
    </div>
    <!-- ***************************************** -->
    <div class="container">
      <div class="box">
        <img :src="imgUrl" alt="图片加载失败" @click="createPoint" />
        <!-- 最外层div -->
        <div
          class="point"
          v-for="(item, index) in pointDataList"
          :key="index"
          :style="{ left: item.offsetX + 'px', top: item.offsetY + 'px' }"
        >
          <div class="i">
            <i
              @mouseenter="enterPoint(index)"
              @mouseleave="leavePoint(index)"
              :class="item.type"
              :style="{ fontSize: item.iconSize + 'px', color: item.state }"
            />
          </div>
          <!-- 提示框 -->
          <div
            class="hover-text-box"
            v-if="displayFlagList[index]"
            :style="{
              marginTop: item.iconSize + 'px',
              paddingLeft: item.iconSize + 'px',
            }"
          >
            <div class="triangle"></div>
            <div class="hover-text">{{ item.deviceName }}:{{ item.deviceValue }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- ***************************************** -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: "",
      stationList: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
          ],
        },
      ],
      deviceList: [
        {
          label: "热门城市",
          options: [
            {
              value: "Shanghai",
              label: "上海",
            },
            {
              value: "Beijing",
              label: "北京",
            },
          ],
        },
        {
          label: "城市名",
          options: [
            {
              value: "Chengdu",
              label: "成都",
            },
            {
              value: "Shenzhen",
              label: "深圳",
            },
            {
              value: "Guangzhou",
              label: "广州",
            },
            {
              value: "Dalian",
              label: "大连",
            },
          ],
        },
      ],
      // 站点选择器中显示的值
      stationValue:"",
      // 设备选择器中显示的值
      deviceValue: "",
      legendSize: 20,
      // 图例数据1
      legendList1: [
        {
          type: "el-icon-circle-plus",
          theme: "filled",
          size: "30",
          fill: "#6ac63c",
          description: "加油枪气液比",
        },
        {
          type: "el-icon-s-opportunity",
          theme: "filled",
          size: "30",
          fill: "#6ac63c",
          description: "可燃气体测点",
        },
        {
          type: "el-icon-s-cooperation",
          theme: "filled",
          size: "30",
          fill: "#6ac63c",
          description: "压力测点",
        },
        {
          type: "el-icon-s-help",
          theme: "filled",
          size: "30",
          fill: "#6ac63c",
          description: "密闭性测点",
        },
        {
          type: "el-icon-share",
          theme: "filled",
          size: "30",
          fill: "#6ac63c",
          description: "温度测点",
        },
        {
          type: "el-icon-camera-solid",
          theme: "filled",
          size: "30",
          fill: "#6ac63c",
          description: "摄像头",
        },
      ],
      // 图例数据2
      legendList2: [
        {
          type: "el-icon-circle-plus",
          theme: "filled",
          size: "30",
          fill: "#6ac63c",
          description: "正常",
        },
        {
          type: "el-icon-circle-plus",
          theme: "filled",
          size: "30",
          fill: "#f3b105",
          description: "预警",
        },
        {
          type: "el-icon-circle-plus",
          theme: "filled",
          size: "30",
          fill: "#ff0000",
          description: "报警",
        },
        {
          type: "el-icon-circle-plus",
          theme: "filled",
          size: "30",
          fill: "#808080",
          description: "无效",
        },
      ],
      // 油站数据
      stateData: {
        success: true,
        code: 20000,
        message: "成功",
        data: {
          stationImage: {
            id: 68,
            stationId: "21140034",
            stationName: "四方台远航加油站（石化加油站）",
            imageType: "加油站平面图",
            uploadTime: "2022-06-07 12:03:16",
            examineTime: "2022-06-07 12:03:16",
            examineState: "审核成功",
            uploaderIp: "119.108.151.217",
            imageUrl: "http://60.16.5.228:8082/image/getStationPlan/21140034-plan",
          },
        },
      },
      // 网络接收的点位数据
      pointData: {
        success: true,
        code: 20000,
        message: "成功",
        data: {
          planDeviceInfoIsland: [
            {
              offsetX: 0,
              offsetY: 0,
              deviceName: "1",
              deviceValue: "0.0",
              state: "正常",
              mark: 0,
              iconSize: 20,
            },
            {
              offsetX: 0,
              offsetY: 0,
              deviceName: "2",
              deviceValue: "0.0",
              state: "正常",
              mark: 0,
              iconSize: 20,
            },
          ],
          planDeviceInfoOther: [
            {
              offsetX: 114,
              offsetY: 167,
              deviceName: "密闭性测点",
              deviceValue: "N",
              state: "预警",
              mark: 1,
              iconSize: 20,
            },
            {
              offsetX: 117,
              offsetY: 196,
              deviceName: "油罐压力测点(Pa)",
              deviceValue: "-425.9",
              state: "无效",
              mark: 1,
              iconSize: 20,
            },
            {
              offsetX: 746,
              offsetY: 512,
              deviceName: "管线压力测点(Pa)",
              deviceValue: "N",
              state: "无效",
              mark: 1,
              iconSize: 20,
            },
            {
              offsetX: 297,
              offsetY: 156,
              deviceName: "加油枪气液比",
              deviceValue: "0.0",
              state: "无效",
              mark: 1,
              iconSize: 20,
            },
            {
              offsetX: 115,
              offsetY: 231,
              deviceName: "摄像头",
              deviceValue: "0.0",
              state: "报警",
              mark: 1,
              iconSize: 20,
            },
            {
              offsetX: 179,
              offsetY: 192,
              deviceName: "油气温度测点(℃)",
              deviceValue: "23.1",
              state: "正常",
              mark: 1,
              iconSize: 20,
            },
          ],
          planDeviceInfoCamera: [],
        },
      },
      // 处理后使用的点位数据
      pointDataList: [],
      newLyAddedPoint:{},
      // 描述性文字是否显示 flag
      displayFlagList: [],
    };
  },
  mounted() {
    this.initData();
  },
  watch:{
    legendSize(newValue){
      this.newLyAddedPoint.iconSize = newValue;
    },
    /* 
      选择站点
    */
    stationValue(newValue, oldValue){
      console.log('new:',newValue);
      console.log('old:',oldValue);
    },
    /* 
      修改设备，每个种类只能添加一个图例
    */
    deviceValue(newValue, oldValue){
      console.log('new:',newValue);
      console.log('old:',oldValue);

      // 设备改变后，获取该设备的 deviceName、deviceValue、state、mark、iconSize 等
      this.newLyAddedPoint.deviceName =  "加油枪气液比";
      this.newLyAddedPoint.deviceValue =  "666";
      this.newLyAddedPoint.state =  "报警";
      this.newLyAddedPoint.mark =  1;
      this.newLyAddedPoint.iconSize = this.legendSize;
      // 该设备的 offsetX、offsetY 由鼠标点击时获取
      this.pointDataList.push(this.newLyAddedPoint);
      this.dealPoint(this.pointDataList);
    }
  },
  methods: {
    initData() {
      this.imgUrl = this.stateData.data.stationImage.imageUrl;
      this.pointDataList = this.pointData.data.planDeviceInfoOther;

      this.newLyAddedPoint = {
        offsetX: 0,
        offsetY: 0,
        deviceName: "",
        deviceValue: "",
        state: "",
        mark: 1,
        iconSize: 20,
      };

      this.dealPoint(this.pointDataList);
    },
    /* 
      处理从网络接收到的 point 数据 pointData  
      把中文名称变成 type ，把中文状态变为 state 颜色
    */
    dealPoint(list) {
      console.log({ list });
      list.forEach((item) => {
        switch (item.state) {
          case "正常":
            item.state = "#6ac63c";
            break;
          case "预警":
            item.state = "#f3b105";
            break;
          case "报警":
            item.state = "#ff0000";
            break;
          case "无效":
            item.state = "#808080";
            break;
          default:
            break;
        }
      });
      list.forEach((item) => {
        if (item.deviceName.includes("加油枪气液比")) {
          item.type = "el-icon-circle-plus";
        } else if (item.deviceName.includes("可燃气体测点")) {
          item.type = "el-icon-s-opportunity";
        } else if (item.deviceName.includes("压力测点")) {
          item.type = "el-icon-s-cooperation";
        } else if (item.deviceName.includes("密闭性测点")) {
          item.type = "el-icon-s-help";
        } else if (item.deviceName.includes("温度测点")) {
          item.type = "el-icon-s-cooperation";
        } else if (item.deviceName.includes("摄像头")) {
          item.type = "el-icon-s-cooperation";
        }
      });

      // 默认描述性的文字标题隐藏
      this.displayFlagList.length = this.pointDataList.length;
      this.displayFlagList.fill(0);
    },
    handleChangeStation(){
      console.log('handleChangeStation');
    },
    /* 
      点击图片时增加新的标注点
    */
    createPoint(e) {
      // console.log("offsetX", e.offsetX);
      // console.log("offsetY", e.offsetY);
      this.newLyAddedPoint.offsetX =  e.offsetX;
      this.newLyAddedPoint.offsetY =  e.offsetY;
    },
    /* 
      鼠标移到标注点上时，显示 description
    */
    enterPoint(index) {
      this.displayFlagList[index] = 1;
      // 强制刷新dom
      this.$forceUpdate();
    },
    /* 
      鼠标移出标注点上时，隐藏 description
    */
    leavePoint(index) {
      this.displayFlagList[index] = 0;
      // 强制刷新dom
      this.$forceUpdate();
    },
  },
};
</script>

<style scoped>
.device-select {
  display: flex;
  align-items: center;
}
h4 {
  display: inline-block;
  margin: 0 10px;
}
.el-slider {
  display: inline-block;
  width: 200px;
  margin: 0 10px;
}
.legend {
  display: flex;
  align-items: center;
}
img{
  z-index: -1;
}

h3 {
  display: inline-block;
}

.container {
  text-align: center;
  /* background: lightblue; */
}
.box {
  display: inline-block;
  position: relative;
}

.point {
  position: absolute;
  left: 0px;
  top: 0px;
}
.i {
  position: absolute;
  z-index: 0;
}
.hover-text-box {
  position: relative; /* 必须有 position, z-index 才生效 */
  z-index: 2;
  margin-top: 10px;
  padding-left: 20px;
  transform: translateX(-50%);
}
.triangle {
  margin: 0px auto 0 auto;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-top: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #add8e6;
}
.hover-text {
  font-size: large;
  font-weight: 600;
  padding: 5px;
  background: #add8e6;
  /* border: 1px solid black; */
}
</style>
